import { createRouter, createWebHistory } from 'vue-router'
import { useMenuStore } from '@/stores/menu'
import { getMenus } from '@/api/user';
import { useUserStore } from '@/stores/user'
const routes = [
    {
        path: "/login",
        name: "login",
        meta: {
            title: "登陆",
        },
        component: () => import('@/views/login/index.vue')
    },
    {
        path: "/404",
        name: "404",
        meta: {
            title: "404",
        },
        component: () => import('@/views/404/index.vue')
    },
    {
        path: "/screen",
        name: "screen",
        meta: {
            title: "数据大屏",
        },
        component: () => import('@/views/screen/index.vue')
    }, {
        path: "/three",
        name: "three",
        meta: {
            title: "模型",
        },
        component: () => import('@/views/three/index.vue')
    }, {
        path: "/css",
        name: "css",
        meta: {
            title: "模型",
        },
        component: () => import('@/views/three/css.vue')
    },
    {
        path: "/",
        name: "layout",
        meta: {
            title: "首页"
        },
        component: () => import('@/views/layout/index.vue'),
        redirect: "/home",
        children: []
    }
]

const ROUTE_WHITE_LIST = [
    '/login',
    '/screen',
    '/three',
    '/css'
]
//创建路由对象
const router = createRouter({
    history: createWebHistory(),
    routes
})
//动态路由
function dynamicRouter(menuList) {
    let routers = router.getRoutes();
    routers.forEach(item => {
        if ((ROUTE_WHITE_LIST.find(item => item === item.path)) !== -1) {
            return
        } else {
            router.removeRoute(item.name)
        }
    })
    const modules = import.meta.glob('../views/**/*.vue');
 

    menuList.forEach(item => {
        if (item.children && item.children.length != 0) {
            router.addRoute('layout', item)
      
            item.children.forEach((val) => {
                let url = `../views/${val.component}`;
                val.component = modules[url];
                router.addRoute(item.name, val)
            });
        } else {
            
            let url = `../views/${item.component}`;
            item.component = modules[url];
            router.addRoute('layout', item)
        }
    })
}

//路由拦截 
router.beforeEach(async (to, from, next) => {
    
    const userStore = useUserStore();
    document.title = to.meta.title;
    if (!userStore.token) {
 
        //如果未登陆 不需要登录的页面直接登陆
        if ((ROUTE_WHITE_LIST.findIndex(item => item === to.path)) !== -1) {
   
            next()
  
        } else {
       
            //否则就需要去登录
            next({
                path: "/login"
            })
        }
    } else {
        //用户已经登陆
        const menuStore = useMenuStore();

    
        const index = ROUTE_WHITE_LIST.findIndex(item =>

            item === to.path
        );
        if (index ===0) {
            next()
        } else if (menuStore && ( menuStore.state.wsMenus==undefined || menuStore.state.wsMenus.length == 0 )) {
            const { data } = await getMenus();
            menuStore.initMenu(data)
            //进行动态路由的创建 从缓存中拿数据缓存
            dynamicRouter(data);
            next({ path: to.path });
        } else {
            next();
        }
    }
})

export default router